<!DOCTYPE html>
<html>
<head>

	<title>{{page.title}}</title>

	<link rel="stylesheet" href="base.css" type="text/css">

	<script language="JavaScript"> 

document.onclick= function(event) {
    if (event===undefined) event= window.event;                     // IE hack
    var target= 'target' in event? event.target : event.srcElement; // another IE hack

    var root= document.compatMode==='CSS1Compat'? document.documentElement : document.body;
    var mxy= [event.clientX+root.scrollLeft, event.clientY+root.scrollTop];

    var path= getPathTo(target);
    var txy= getPageXY(target);
    alert('Clicked element '+path+' offset '+(mxy[0]-txy[0])+', '+(mxy[1]-txy[1]));
}

function getPathTo(element) {
    if (element.id!=='')
        return 'id("'+element.id+'")';
    if (element===document.body)
        return element.tagName;

    var ix= 0;
    var siblings= element.parentNode.childNodes;
    for (var i= 0; i<siblings.length; i++) {
        var sibling= siblings[i];
        if (sibling===element)
            return getPathTo(element.parentNode)+'/'+element.tagName+'['+(ix+1)+']';
        if (sibling.nodeType===1 && sibling.tagName===element.tagName)
            ix++;
    }
}

function getPageXY(element) {
    var x= 0, y= 0;
    while (element) {
        x+= element.offsetLeft;
        y+= element.offsetTop;
        element= element.offsetParent;
    }
    return [x, y];
}
	</script> 


</head>

<body>

<div id="wrapper">
	
	<div id="header">HEADER</div>
	
	<div id="main-nav">MAIN-NAV</div>
	
	<div id="main-wrapper">
	
		<div id="sidebar">SIDEBAR</div>

		<div id="content">

			<ul id="content-ul">
				<li id="content-li">
						<div class="cell" id="c1" onclick="change('c1');">
							<input class="cell-select" type="checkbox" name="cell1">
							<img class="cell-img">
							<span class="cell-name">TEST1</span>
							<span class="cell-lastchange">LASTCHANGE
</span>
							<input class="cell-edit" type="button" name="edit">
							<input class="cell-remove" type="button" name="remove">

						</div>
						<div class="cell" id="c2" onclick="change('c2');">
							<input class="cell-select" type="checkbox" name="cell1">
							<img class="cell-img">
							<span class="cell-name">TEST1</span>
							<span class="cell-lastchange">LASTCHANGE
</span>
							<input class="cell-edit" type="button" name="edit">
							<input class="cell-remove" type="button" name="remove">

						</div>
				</li>
				<li>Test 2</li>
			</ul>


		</div>
	</div>

</div>



</body></html>